<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--数据绑定指的就是将页面数据绑定到Vue对象上  或从Vue对象将数据拿到页面上-->
    <!--1.插值语法-->
    {{address}} <br>
    <p>{{address}}</p>

    <!--2.指令语法-->
    <!--单向数据绑定  v-xx 称为指令   -->
    <input type="text" v-bind:value="address">
    <!--简写-->
    <input type="text" :value="address">
    <hr>

    <!--双向数据绑定 只有表单元素能用 用于收集数据-->
    <input type="text" v-model:value="username">
    <!--简写-->
    <input type="text" v-model="username">

</div>

</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            address:'云南昆明1111',
            username:'刘德华'
        }
    });
</script>